.<template>
  <div class="app-container">
    <!-- 查询选择器 -->
    <!--查询表单-->
    <!-- 查询选择器 -->
    <!--查询表单-->

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>专利名称： </el-form-item>
      <el-form-item
        ><el-input placeholder="请输入内容" v-model="sizer.title" clearable>
        </el-input
      ></el-form-item>

      <el-form-item>
        <el-select
          v-model="sizer.value"
          multiple
          filterable
          collapse-tags
          value-key="value"
          placeholder="专利评分"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select
          v-model="sizer.type"
          multiple
          filterable
          collapse-tags
          value-key="value"
          placeholder="专利类型"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select
          v-model="sizer.applierType"
          multiple
          filterable
          collapse-tags
          value-key="value"
          placeholder="申请人类型"
        >
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select
          v-model="sizer.applyArea"
          multiple
          filterable
          collapse-tags
          value-key="value"
          placeholder="所属省份"
        >
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item> 申请年: </el-form-item>
      <el-form-item>
        <el-input
          placeholder="年份(1900-2020)"
          v-model="sizer.applyYear"
          clearable
          style="width: 100px"
        >
        </el-input>
      </el-form-item>
      <el-form-item> 被引次数: </el-form-item>
      <el-form-item>
        <el-input
          placeholder="1-1000"
          v-model="sizer.citeNum"
          clearable
          style="width: 100px"
        >
        </el-input>
      </el-form-item>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="postSizer(), getSizerTotal()"
        >查询</el-button
      >
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    专利总数: {{ patentsTotal }}
    <!-- 表格 -->
    <template>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        v-loading="listLoading"
        stripe
        :data="list"
        :cell-style="cellStyle"
        element-loading-text="数据加载中"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          prop="application_num"
          label="申请号"
          width="230"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="title" label="专利名称" width="340" />
        <el-table-column
          prop="applicant"
          label="申请人(applicant)"
          width="240"
        />
        <el-table-column prop="patent_type" label="专利类型" width="120" />
        <el-table-column label="专利评分" width="150">
          <template slot-scope="scope">
            <!-- 三个等号 判断值和类型 -->
            <!-- <span v-if="scope.row.cited_num==='1'" style="color:#F56C6C">高价值专利</span>
            <span v-else> </span> -->
            {{ scope.row.value_score }}
            {{ scope.row.value_score >= 10 ? "(高价值专利)" : "" }}
          </template>
        </el-table-column>
        <el-table-column prop="inventor" label="发明人(inventor)" width="200" />
        <el-table-column prop="publication_day" label="公开日" />
        <el-table-column prop="cited_num" label="被引数" />

        <!-- <el-table-column prop="patentWords" label="关键词" width="340"/> -->

        <el-table-column label="操作" width="200" align="center">
          <!-- slot-scope获取整个表格 -->
          <template slot-scope="scope">
            <router-link :to="'/patent/detail/' + scope.row.application_num">
              <el-button type="primary" size="mini" icon="el-icon-share"
                >查看</el-button
              >
            </router-link>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-circle-plus"
              @click="collectPatent(scope.row.application_num)"
              >收藏</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页条 -->

      <!-- 分页   @符号是绑定一个即v-on -->
      <!-- current-page：当前页 page-size：每页记录数  total：一共有多少记录数 @current-change="getList"：分页方法-->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="postSizer"
      />
    </template>
  </div>
</template>
<script>
//引入调用patent.js文件
import patent from "@/api/chapter/patent";
import Sizer from "@/views/layout/components/sizer/sizer";
import collect from '@/api/chapter/collect'

export default {
  components: {
    Sizer,
  },
  //写核心代码的位置
  //data方法写法一
  // data:{//定义变量及初始值

  // },

  //data方法写法二，更经常用
  data() {
    //定义变量及初始值
    return {
      listLoading: false,
      list: null, //查询之后接口返回集合
      page: 1, //当前页
      limit: 10, //每页显示的记录数
      total: 100, //总记录数
      patentsTotal: 228179, //数据库中的专利总数
      sizer: {},
      year: [],
      options1: [
        {
          value: "五星",
          label: "五星",
        },
        {
          value: "四星",
          label: "四星",
        },
        {
          value: "三星",
          label: "三星",
        },
        {
          value: "二星",
          label: "二星",
        },
        {
          value: "一星",
          label: "一星",
        },
      ],
      options2: [
        {
          value: "发明授权",
          label: "发明授权",
        },
        {
          value: "发明申请",
          label: "发明申请",
        },
        {
          value: "外观设计",
          label: "外观设计",
        },
        {
          value: "实用新型",
          label: "实用新型",
        },
        {
          value: "检索报告",
          label: "检索报告",
        },
        {
          value: "译文",
          label: "译文",
        },
        {
          value: "其他类型",
          label: "其他类型",
        },
      ],
      options3: [
        {
          value: "科研单位",
          label: "科研单位",
        },
        {
          value: "机关团体",
          label: "机关团体",
        },
        {
          value: "大专院校",
          label: "大专院校",
        },
        {
          value: "企业",
          label: "企业",
        },
        {
          value: "个人",
          label: "个人",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      options4: [
        {
          value: "北京",
          label: "北京",
        },
        {
          value: "天津",
          label: "天津",
        },
        {
          value: "上海",
          label: "上海",
        },
        {
          value: "重庆",
          label: "重庆",
        },
        {
          value: "河北",
          label: "河北",
        },
        {
          value: "河南",
          label: "河南",
        },
        {
          value: "云南",
          label: "云南",
        },
        {
          value: "辽宁",
          label: "辽宁",
        },
        {
          value: "黑龙江",
          label: "黑龙江",
        },
        {
          value: "湖南",
          label: "湖南",
        },
        {
          value: "安徽",
          label: "安徽",
        },
        {
          value: "山东",
          label: "山东",
        },
        {
          value: "新疆",
          label: "新疆",
        },
        {
          value: "江苏",
          label: "江苏",
        },
        {
          value: "浙江",
          label: "浙江",
        },
        {
          value: "江西",
          label: "江西",
        },
        {
          value: "湖北",
          label: "湖北",
        },
        {
          value: "广西",
          label: "广西",
        },
        {
          value: "甘肃",
          label: "甘肃",
        },
        {
          value: "山西",
          label: "山西",
        },
        {
          value: "内蒙古",
          label: "内蒙古",
        },
        {
          value: "陕西",
          label: "陕西",
        },
        {
          value: "吉林",
          label: "吉林",
        },
        {
          value: "福建",
          label: "福建",
        },
        {
          value: "广东",
          label: "广东",
        },
        {
          value: "青海",
          label: "青海",
        },
        {
          value: "西藏",
          label: "西藏",
        },
        {
          value: "四川",
          label: "四川",
        },
        {
          value: "宁夏",
          label: "宁夏",
        },
        {
          value: "海南",
          label: "海南",
        },
        {
          value: "台湾",
          label: "台湾",
        },
        {
          value: "香港",
          label: "香港",
        },
        {
          value: "澳门",
          label: "澳门",
        },
        {
          value: "南海诸岛",
          label: "南海诸岛",
        },
      ],
    };
  },
  created() {
    //页面渲染之前执行，调用methods定义的方法
    //调用
    this.getPatentsTotal();
    this.getLog();
    this.postSizer();
    this.getSizerTotal();
  },
  methods: {
    cellStyle(row, column, rowIndex, columnIndex) {
      if (
        row.column.label === "专利类型" &&
        row.row.patent_type === "发明申请"
      ) {
        return "color:#F56C6C";
      } else if (row.column.label === "专利类型") {
        return "color:#E6A23C";
      } else if (row.column.label === "专利类型") {
        return "color:#67C23A";
      }
    },
    //收藏专利
    collectPatent(patentNum){
      collect.collectPatent(patentNum).then((res) =>{
        if(res.data.state == true){
          this.$message({
          message: '   收藏成功    ',
          type: 'success'
        });
        }
      })

    },
    //获取数据库里的专利总数
    getPatentsTotal() {
      patent
        .getPatentsTotal()
        .then((res) => {
          this.patentsTotal = res.data.patentsTotal;
        })
        .catch((error) => {
          console.log(error);
        }); //请求失败 error就是返回的错误信息;
    },

    //列表渲染方法
    postSizer(page = 1) {
      this.page = page;
      console.log("执行方法");
      console.log(this.sizer);
      this.listLoading = true;
      patent
        .postSizer(this.page, this.limit, this.sizer)
        .then((res) => {
          this.list = res.data.items; //返回数据的items赋值给data中的list
          // this.total = res.data.total; //返回数据的total赋值给data中的list
          console.log(this.list);
          // console.log(this.total);
          this.listLoading = false;
        })
        .catch((error) => {
          this.listLoading = false;
          console.log(error);
        }); //请求失败 error就是返回的错误信息;
    },
    getLog() {
      console.log("1111");
      console.log(this.sizer);
    },

    //获取带条件时的专利总数
    getSizerTotal() {
      this.listLoading = true;
      patent
        .getSizerTotal(this.sizer)
        .then((res) => {
          this.total = res.data.total;
          console.log(this.total);
        })
        .catch((error) => {
          this.listLoading = true;
          console.log(error);
        });
    },
  },
};
</script>

<style>
</style>